<!DOCTYPE html>
<html>
<head>
    <title>摄像头视频流</title>
</head>
<body>
    <h2>摄像头视频流测试</h2>
    <img id="video" src="" width="640" height="480">
    <div id="status">等待连接...</div>

    <script>
        const video = document.getElementById('video');
        const status = document.getElementById('status');
        
        // 连接到WebSocket服务器
        const ws = new WebSocket('ws://localhost:8168');
        
        ws.onopen = function() {
            status.textContent = '已连接到服务器';
            console.log('WebSocket连接已建立');
        };
        
        ws.onmessage = function(event) {
            // 直接设置图片源为接收到的base64数据
            video.src = event.data;
        };
        
        ws.onerror = function(error) {
            status.textContent = '连接错误: ' + error;
            console.error('WebSocket错误:', error);
        };
        
        ws.onclose = function() {
            status.textContent = '连接已关闭';
            console.log('WebSocket连接已关闭');
        };
    </script>
</body>
</html>